<template>
  <div>
    <el-descriptions title="商品信息" border>
      <el-descriptions-item label="产品名">
        <el-tag size="small">{{ auditInfo['productSpecies'] }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="产品种类">{{ auditInfo['productVariety'] }}</el-descriptions-item>
      <el-descriptions-item label="状态">{{ auditInfo['productStatus'] }}</el-descriptions-item>
      <el-descriptions-item label="发布时间">{{ auditInfo['createTime'] }}</el-descriptions-item>
      <el-descriptions-item label="重量">{{ auditInfo['productWeight'] }}</el-descriptions-item>
      <el-descriptions-item label="价格">{{ auditInfo['productPrice'] }}</el-descriptions-item>
      <el-descriptions-item label="生产地区">{{ auditInfo['productProductionArea'] }}</el-descriptions-item>
      <el-descriptions-item label="备注">{{ auditInfo['productRemark'] }}</el-descriptions-item>
    </el-descriptions>
    <el-descriptions title="产品图片" :column="2" direction="vertical">
      <el-descriptions-item label="封面">
        <el-image v-if="auditInfo['productCover']"
                  :src="auditInfo['productCover']"
                  fit="scale-down" class="productCover">
        </el-image>
      </el-descriptions-item>
      <el-descriptions-item label="图片展示">
        <el-image class="imgList"
                  v-for="(url, index) in auditInfo['imgList']"
                  :preview-src-list="auditInfo['imgList']"
                  :src="url" :key="index"
                  :z-index="index"></el-image>
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script>
export default {
  name: "AuditInfo",
  props: {
    auditInfo: {
      required: true,
      type: Object,
    }
  },
}
</script>
<style scoped>
.productCover {
  min-width: 200px;
  max-height: 300px;
  margin-right: 20px;
}

.imgList {
  width: 150px;
  aspect-ratio: 1;
  margin-right: 10px;
  margin-bottom: 10px;
}
.el-image__error{
  width: 200px !important;
  aspect-ratio: 1 !important;
}
</style>
